<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title> 自行车后台管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <link href="../css/common.css" rel="stylesheet">
</head>

<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden;padding: 20px 0">
    <div class="main1 fl main">
        <p>
            <span>用户信息</span>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </p>
        <div id="main1" style="height:350px"></div>
    </div>
    <div class="main2 fl main">
        <p>
            <span>统计数据</span>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </p>
        <div id="main2" style="height:350px"></div>
    </div>
    <div class="main3 main fl">
        <div class="index_y">
            <p><span>锁住设备预警</span><a href="#">查看更多</a></p>
            <ul>
                <li>
                    <span class="index_b1">长时间未使用设备</span><span class="index_b2">10个</span>
                </li>
                <li>
                    <span class="index_b1">长时间未使用设备</span><span class="index_b2">10个</span>
                </li>
                <li>
                    <span class="index_b1">长时间未使用设备</span><span class="index_b2">10个</span>
                </li>
            </ul>
        </div>
        <div class="index_y">
            <p><span>锁住设备预警asdasdasdas</span><a href="#">查看更多</a></p>
            <ul>
                <li>
                    <span class="index_b1">长时间未使用设备</span><span class="index_b2">10个</span>
                </li>
                <li>
                    <span class="index_b1">长时间未使用设备</span><span class="index_b2">10个</span>
                </li>
                <li>
                    <span class="index_b1">长时间未使用设备</span><span class="index_b2">10个</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="main4 main fl">
        <p>
            <span>收益率</span>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </p>
        <div id="main4" style="height:400px"></div>
    </div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    // 使用
    require(
        [
            'echarts',
            'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
        ],
        function(ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart1 = ec.init(document.getElementById('main1'), 'macarons');

            var option1 = {
                // backgroundColor: 'rgba(247,247,247,1)',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
                },

                calculable: true,
                xAxis: [{
                    type: 'category',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: '直接访问',
                    type: 'bar',
                    data: [320, 332, 301, 334, 390, 330, 320]
                }, {
                    name: '邮件营销',
                    type: 'bar',
                    stack: '广告',
                    data: [120, 132, 101, 134, 90, 230, 210]
                }, {
                    name: '联盟广告',
                    type: 'bar',
                    stack: '广告',
                    data: [220, 182, 191, 234, 290, 330, 310]
                }, {
                    name: '视频广告',
                    type: 'bar',
                    stack: '广告',
                    data: [150, 232, 201, 154, 190, 330, 410]
                }, {
                    name: '搜索引擎',
                    type: 'bar',
                    data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                    markLine: {
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        },
                        data: [
                            [{
                                type: 'min'
                            }, {
                                type: 'max'
                            }]
                        ]
                    }
                }, {
                    name: '百度',
                    type: 'bar',
                    barWidth: 5,
                    stack: '搜索引擎',
                    data: [620, 732, 701, 734, 1090, 1130, 1120]
                }, {
                    name: '谷歌',
                    type: 'bar',
                    stack: '搜索引擎',
                    data: [120, 132, 101, 134, 290, 230, 220]
                }, {
                    name: '必应',
                    type: 'bar',
                    stack: '搜索引擎',
                    data: [60, 72, 71, 74, 190, 130, 110]
                }, {
                    name: '其他',
                    type: 'bar',
                    stack: '搜索引擎',
                    data: [62, 82, 91, 84, 109, 110, 120]
                }]
            };


            // 为echarts对象加载数据 
            myChart1.setOption(option1);
        }
    );
    // 第二个饼图
    require(
        [
            'echarts',
            'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
        ],
        function(ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart2 = ec.init(document.getElementById('main2'), 'macarons');
            var option2 = {
                // backgroundColor: 'rgba(247,247,247,1)',

                title: {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },

                calculable: true,
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [{
                        value: 335,
                        name: '直接访问'
                    }, {
                        value: 310,
                        name: '邮件营销'
                    }, {
                        value: 234,
                        name: '联盟广告'
                    }, {
                        value: 135,
                        name: '视频广告'
                    }, {
                        value: 1548,
                        name: '搜索引擎'
                    }]
                }]
            };


            // 为echarts对象加载数据 
            myChart2.setOption(option2);
        }
    );

    // 使用
    require(
        [
            'echarts',
            'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
        ],
        function(ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart4 = ec.init(document.getElementById('main4'), 'macarons');
            var option4 = {
                // backgroundColor: 'rgba(247,247,247,1)',
                title: {
                    text: '未来一周气温变化',
                    subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['最高气温', '最低气温']
                },
                
                calculable: true,
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                }],
                series: [{
                    name: '最高气温',
                    type: 'line',
                    data: [11, 11, 15, 13, 12, 13, 10],
                    markPoint: {
                        data: [{
                            type: 'max',
                            name: '最大值'
                        }, {
                            type: 'min',
                            name: '最小值'
                        }]
                    },
                    markLine: {
                        data: [{
                            type: 'average',
                            name: '平均值'
                        }]
                    }
                }, {
                    name: '最低气温',
                    type: 'line',
                    data: [1, -2, 2, 5, 3, 2, 0],
                    markPoint: {
                        data: [{
                            name: '周最低',
                            value: -2,
                            xAxis: 1,
                            yAxis: -1.5
                        }]
                    },
                    markLine: {
                        data: [{
                            type: 'average',
                            name: '平均值'
                        }]
                    }
                }]
            };




            // 为echarts对象加载数据 
            myChart4.setOption(option4);
        }
    )
    </script>
</body>

</html>
